<template>
  <div>
    <!-- <img src=""/> -->
    <div class="item" v-for="item in goods" :key="item.goods_id">
      <div class="img">
        <img src="../assets/logo.png" :data-src="item.goods_small_logo" />
      </div>
      <div class="title">{{ item.goods_name }}</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      goods: [],
    };
  },

  methods: {
    async getList() {
      let res = await axios.get(
        "https://api-hmugo-web.itheima.net/api/public/v1/goods/search?pagesize=40"
      );
      console.log(res.data.message.goods);

      //数据进行筛选的过程?
      this.goods = res.data.message.goods.filter(
        (item) => item.goods_small_logo
      );
      this.$nextTick(() => {
        //获取页面中DOM节点
        let imgs = document.querySelectorAll("img");
        console.log(imgs);

        //获取html文档对象
        let html = document.documentElement || document.body;

        for(let i=0;i<imgs.length;i++){
          //图片进入可视化区域的条件
          if(imgs[i].offsetTop <= html.clientHeight + html.scrollTop){
            setTimeout(()=>{
              //把自定义路径给真实路径
              imgs[i].src = imgs[i].getAttribute("data-src");
            },500);
          }
        }
      });
    },
  },
  created() {
    this.getList();

    window.addEventListener("scroll",this.getList);
  },
};
</script>

<style lang="less" scoped>
img{
  width: 100%;
  height: 300px;
}
</style>